<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-21 13:41:19
 * @LastEditors: dh
 * @LastEditTime: 2022-12-28 14:56:19
-->
<template>
	<Test />
	<button @click="change">父组件修改信息</button>
</template>

<script lang="ts">
import { defineAsyncComponent, reactive, defineComponent, toRefs } from 'vue';

export default defineComponent({
	components: {
		Test: defineAsyncComponent(() => import('./components/test.vue')),
	},

	/* 1 这种方法只能传递一个固定数据,不能响应，而且不能访问this */
	// provide: {
	// 	userInfo: {
	// 		name: 'deng',
	// 		age: 20,
	// 	},
	// },

	/* 2  这种方法能响应，但是必须是对象，且只能修改对象的值，不能覆盖,能访问this , 子组件修改，父组件也能响应*/
	provide() {
		return {
			userInfo: this.userInfo,
		};
	},
	setup() {
		const state = reactive({
			userInfo: {
				name: 'deng',
				age: 20,
			},
		});
		console.log(state);

		return { ...toRefs(state) };
	},
	methods: {
		change() {
			this.userInfo.name = 'yao';
			this.userInfo.age = 30;
			// this.userInfo = { //不能响应
			//     name: "yao",
			//     age: 30,
			// };
		},
	},
});
</script>
<!-- <script setup lang="ts">
import { provide, inject, ref } from 'vue';
// 父组件注入,静态值
provide('name', 'deng');
const count = ref(0);
// 父组件注入，响应式的值
provide('count', count);
// 子组件引入，第二参数默认值
inject('name', 'default-value');
inject('count', 'default-value');
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)
</script> -->
